<template>
	<button
		class="wj-button"
		:class="[
			`wj-button-${type}`,
			{
				'is-plain': plain,
				'is-round': round,
				'is-circle': circle,
				'is-disabled': disabled,
			},
		]"
		@click="handleClick"
		:disabled="disabled"
	>
		<i v-if="icon" :class="`wj-icon-${icon}`"></i>
		<!-- 如果没传入文本插槽，则不显示span内容 -->
		<span class="btnContent" v-if="$slots.default"><slot></slot></span>
	</button>
</template>

<script>
export default {
	name: "wj-Button",
	props: {
		type: {
			type: String,
			default: "default",
		},
		plain: {
			type: Boolean,
			default: false,
		},
		round: {
			type: Boolean,
			default: false,
		},
		circle: {
			type: Boolean,
			default: false,
		},
		icon: {
			type: String,
			default: "",
		},
		disabled: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {};
	},
	methods: {
    handleClick(e) {
      this.$emit("click", e);
		},
	},
};
</script>

<style lang="less">
/*普通*/
.wj-button {
	display: inline-block; /*变为行内块：*/
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	line-height: 1;
	white-space: nowrap; /*规定段落中的文本不进行换行：*/
	cursor: pointer;
	background: #ffffff;
	border: 1px solid #dcdfe6;
	color: #606266;
	-webkit-appearance: none; /*去除谷歌浏览器自带按钮样式：*/
	text-align: center;
	box-sizing: border-box; /*内边距和边框放入宽高内*/
	outline: none; /*去除按钮自带边框*/
	margin: 0;
	transition: 0.1s;
	font-weight: 500;
	/*禁止元素的文字被选中*/
	-moz-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	padding: 12px 20px;
	font-size: 16px;
	border-radius: 4px;
	&:hover,
	&:focus {
		color: #409eff;
		border-color: #c6e2ff;
		background-color: #ecf5ff;
	}
	.btnContent{
		display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
		i{
			margin-right: 8px;
		}
	}
}
.wj-button-primary {
	color: #fff;
	background-color: #409eff;
	border-color: #409eff;
	&:hover,
	&:focus {
		background: #66b1ff;
		background-color: #66b1ff;
		color: #fff;
	}
}
.wj-button-success {
	color: #fff;
	background-color: #67c23a;
	border-color: #67c23a;
	&:hover,
	&:focus {
		background: #85ce61;
		background-color: #85ce61;
		color: #fff;
	}
}
.wj-button-info {
	color: #fff;
	background-color: #909399;
	border-color: #909399;
	&:hover,
	&:focus {
		background: #a6a9ad;
		background-color: #a6a9ad;
		color: #fff;
	}
}
.wj-button-warning {
	color: #fff;
	background-color: #e6a23c;
	border-color: #e6a23c;
	&:hover,
	&:focus {
		background: #ebb563;
		background-color: #ebb563;
		color: #fff;
	}
}
.wj-button-danger {
	color: #fff;
	background-color: #f56c6c;
	border-color: #f56c6c;
	&:hover,
	&:focus {
		background: #f78989;
		background-color: #f78989;
		color: #fff;
	}
}
.wj-button-save {
	color: #fff;
	background-color: #70b603;
	border-color: #70b603;
	&:hover,
	&:focus {
		background: #A8D55F;
		background-color: #A8D55F;
		color: #fff;
	}
}
.wj-button-reset {
	color: #fff;
	background-color: #aaaaaa;
	border-color: #aaaaaa;
	&:hover,
	&:focus {
		background: #D2D1D1;
		background-color: #D2D1D1;
		color: #fff;
	}
}
.wj-button-info {
  color: #fff;
	background-color: #6AACD3;
	border-color: #6AACD3;
	&:hover,
	&:focus {
		background: #81BEE1;
		background-color: #81BEE1;
		color: #fff;
	}
}
.wj-button-lowstate {
  color: #fff;
	background-color: #F7C85F;
	border-color: #F7C85F;
	&:hover,
	&:focus {
		background: #F6D06F;
		background-color: #F6D06F;
		color: #fff;
	}
}
.wj-button-middlestate {
  color: #fff;
	background-color: #EF8C4D;
	border-color: #EF8C4D;
	&:hover,
	&:focus {
		background: #F69965;
		background-color: #F69965;
		color: #fff;
	}
}
.wj-button-highstate {
  color: #fff;
	background-color: #DA4B53;
	border-color: #DA4B53;
	&:hover,
	&:focus {
		background: #E3666D;
		background-color: #E3666D;
		color: #fff;
	}
}
.wj-button-severestate {
  color: #fff;
	background-color: #8F243F;
	border-color: #8F243F;
	&:hover,
	&:focus {
		background: #B04B63;
		background-color: #B04B63;
		color: #fff;
	}
}
.wj-button-specialstate {
  color: #fff;
	background-color: #76619A;
	border-color: #76619A;
	&:hover,
	&:focus {
		background: #9987B7;
		background-color: #9987B7;
		color: #fff;
	}
}

/*朴素*/
.wj-button.is-plain {
	&:hover,
	&:focus {
		background: #fff;
		border-color: #489eff;
		color: #409eff;
	}
}
.wj-button-primary.is-plain {
	color: #409eff;
	background: #ecf5ff;
	&:hover,
	&:focus {
		background: #409eff;
		border-color: #409eff;
		color: #fff;
	}
}
.wj-button-success.is-plain {
	color: #67c23a;
	background: #c2e7b0;
	&:hover,
	&:focus {
		background: #67c23a;
		border-color: #67c23a;
		color: #fff;
	}
}
.wj-button-info.is-plain {
	color: #909399;
	background: #d3d4d6;
	&:hover,
	&:focus {
		background: #909399;
		border-color: #909399;
		color: #fff;
	}
}
.wj-button-warning.is-plain {
	color: #e6a23c;
	background: #f5dab1;
	&:hover,
	&:focus {
		background: #e6a23c;
		border-color: #e6a23c;
		color: #fff;
	}
}
.wj-button-danger.is-plain {
	color: #f56c6c;
	background: #fbc4c4;
	&:hover,
	&:focus {
		background: #f56c6c;
		border-color: #f56c6c;
		color: #fff;
	}
}

/*半圆角*/
.wj-button.is-round {
	border-radius: 20px;
	padding: 12px 23px;
}

/*全圆角*/
.wj-button.is-circle {
	border-radius: 50%;
	padding: 12px;
}

/*图标按钮*/
.wj-button [class*="wj-icon-"] + span {
	margin-left: 5px;
}

/*禁用*/
.wj-button.is-disabled {
  /*pointer-events: none;*/
	cursor: not-allowed;
	opacity: 0.6;
}
</style>
